<template>
  <div ref="neuTableWin" class="com-table-win">
    <el-table
      v-if="showTable"
      :max-height="tableMaxHeight + 'px'"
      :data="tableData"
      ref="table"
      :border="options.resizable"
      :default-sort="options.defaultSort"
      :empty-text="''"
      :highlight-current-row="highlightCurrentRow"
      :row-class-name="rowClassNameFunc"
      :cell-class-name="cellClassNameFunc"
      :span-method="objectSpanMethod"
      :row-key="options.rowKey"
      @select="handleSelect"
      @select-all="handleSelectAll"
      :default-expand-all="options.defaultExpandAll"
      @cell-mouse-leave="cellMouseLeave"
      @cell-mouse-enter="cellMouseEnter"
      v-el-table-infinite-scroll="load"
      @selection-change="handleSelectionChange"
      @cell-click="cellClickFunc"
      @cell-dblclick="cellDblclick"
      @row-click="handleRowClick"
      @sort-change="handleTableSort"
      @header-dragend="headerDragend"
      @filter-change="handleFilterChange"
      @current-change="rowHandleCurrentChange"
      :header-cell-class-name="handleTheadAddClass"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        type="selection"
        width="44"
        v-if="options.selectShow"
        :selectable="handleSelectable"
        header-align="center"
        align="center"
        :fixed="selectionFixed"
      ></el-table-column>
      <el-table-column type="expand" v-if="options.expandShow">
        <template slot-scope="props">
          <com-descriptions
            :options="options.expandConfig.options"
            :config="options.expandConfig.config"
            :data="props.row"
          />
        </template>
      </el-table-column>
      <el-table-column
        type="index"
        :index="indexMethod"
        :width="indexWidth()"
        :resizable="false"
        label="序号"
        align="center"
        v-if="options.indexShow"
        :fixed="indexFixed"
      ></el-table-column>
      <template v-for="(item, index) in options.columns">
        <el-table-column
          v-if="showColumn(item)"
          :className="classNameFunc(item, index)"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :minWidth="item.minWidth"
          :width="item.width"
          :fixed="item.fixed"
          :align="item.tag ? 'center' : item.align"
          :sortable="sortable(item.sortable)"
          :show-overflow-tooltip="showOverflowTooltip(item)"
          :column-key="item.prop"
          :filter-multiple="item.isSingle"
          :filters="tableFilters(item)"
          :filter-method="
            item.selectFilter && !item.showFilterButton
              ? filterHandler
              : item.selectFilter && item.showFilterButton
              ? (value, row, column) => {
                  return filterHandler(value, row, column, item);
                }
              : null
          "
          header-align="center"
          :resizable="item.resizable"
        >
          <template v-if="item.inputFilter" slot="header">
            <el-popover placement="top" width="260" trigger="click">
              <div style="display: flex">
                <input
                  class="el-input__inner"
                  ref="searchInput"
                  v-model="filterData"
                  placeholder="输入关键字搜索"
                  @input="!item.showFilterButton && inputFilter(item.prop)"
                  size="mini"
                />
                <el-button
                  size="medium"
                  type="primary"
                  v-if="item.showFilterButton"
                  style="margin-left: 5px"
                  @click="sureSearch(item.prop)"
                  >确定</el-button
                >
              </div>
              <span class="pointer" slot="reference"
                >{{ item.label }}
                <i class="el-icon-arrow-down pointer"></i>
              </span>
            </el-popover>
          </template>
          <template slot-scope="scope">
            <template v-if="preparePropVal(scope, item.prop)">
              <i
                @click="iconClick(scope, item)"
                :class="iconClickClass(scope, item)"
              ></i>
            </template>
            <template v-if="item.btnClick">
              <span
                @click="btnClick(scope, item)"
                :class="btnClickClass(scope, item)"
                v-html="
                  statusFormatter(
                    scope,
                    preparePropVal(scope, item.prop),
                    index,
                    item
                  )
                "
              ></span>
            </template>
            <!--switch栏-->
            <template v-else-if="item.switch">
              <el-switch
                class="el-switch-small"
                v-model="scope.row[item.prop]"
                :active-color="item.activeColor"
                :inactive-color="item.inactiveColor"
                :active-value="item.activeValue"
                :inactive-value="item.inactiveValue"
                :disabled="item.isDisabled && item.disabledMethod(scope)"
                @change="item.onChange && item.onChange(scope)"
              ></el-switch>
            </template>
            <template v-else-if="isTextButton(item,scope, preparePropVal(scope, item.prop))">
               <el-tooltip
                placement="top"
               :content="item.tooltipContentFunc?item.tooltipContentFunc(scope, preparePropVal(scope, item.prop)):''">
                  <el-button
                    :key="index"
                    @click.stop.prevent="item.methods(scope)"
                    type="text"
                    class="tableTextButton"
                    :icon="item.icon"
                    :className="item.class"
                    :class="item.class"
                    :disabled="
                      item.disabledMethod ? item.disabledMethod(scope) : false
                    "
                  >
                    {{
                      statusFormatter(
                        scope,
                        preparePropVal(scope, item.prop),
                        index,
                        item
                      )
                    }}</el-button
                  >
               </el-tooltip>
            </template>
            <template
              v-else-if="item.input && (scope.row.isEdit || options.tableEdit)"
            >
              <el-input
                v-model="scope.row[item.prop]"
                :disabled="item.isDisabled && item.disabledMethod(scope)"
                @change="item.onChange && item.onChange(scope)"
              ></el-input>
            </template>
            <template
              v-else-if="item.select && (scope.row.isEdit || options.tableEdit)"
            >
              <el-select
                class="input-with-select"
                popper-class="wn-selectCom-box"
                v-model="scope.row[item.prop]"
              >
                <el-option
                  v-for="child in item.children"
                  :label="child.label"
                  :value="child.code"
                  :key="child.code"
                  :disabled="child.disabled"
                ></el-option>
              </el-select>
            </template>
            <template
              v-else-if="item.date && (scope.row.isEdit || options.tableEdit)"
            >
              <el-date-picker
                v-model="scope.row[item.prop]"
                :disabled="item.isDisabled && item.disabledMethod(scope)"
                @change="item.onChange && item.onChange(scope)"
                :type="item.dateType || 'date'"
                :format="item.format"
                :value-format="item.valueFormat"
              ></el-date-picker>
            </template>
            <template v-else-if="item.tag">
              <el-tag
                size="mini"
                :class="item.class"
                :type="item.type(scope.row)"
              >
                <span
                  v-html="
                    statusFormatter(
                      scope,
                      preparePropVal(scope, item.prop),
                      index,
                      item
                    )
                  "
                ></span>
              </el-tag>
            </template>
            <template v-else-if="item.progress">
              <template v-if="item.isTipPop">
                <el-tooltip :placement="item.tipPlacement">
                  <div slot="content" v-html="item.getContent(scope)"></div>
                  <el-progress
                    :text-inside="item.textInside"
                    :stroke-width="item.strokeWidth"
                    :percentage="showPercentage(item, scope)"
                    :status="item.status(scope)"
                  ></el-progress>
                </el-tooltip>
              </template>
              <template v-else>
                <span slot="reference" @click.stop="item.click(scope)">
                  <el-progress
                    :text-inside="item.textInside"
                    :stroke-width="item.strokeWidth"
                    :percentage="showPercentage(item, scope)"
                    :status="item.status(scope)"
                  ></el-progress>
                </span>
              </template>
            </template>
            <template v-else-if="item.html">
              <span
                v-html="
                  item.html(
                    scope,
                    preparePropVal(scope, item.prop),
                    index,
                    item
                  )
                "
              />
            </template>
            <template v-else-if="item.htmlTooltip">
              <el-tooltip
                :disabled="tipDisabled(scope, index)"
                :content="
                  statusFormatter(
                    scope,
                    preparePropVal(scope, item.prop),
                    index,
                    item
                  )
                "
                placement="top-start"
              >
                <div
                  slot="content"
                  v-html="
                    statusFormatter(
                      scope,
                      preparePropVal(scope, item.prop),
                      index,
                      item
                    )
                  "
                ></div>
                <div
                  class="htmlTooltipCss"
                  :ref="getRefName(scope, index)"
                  v-html="
                    statusFormatter(
                      scope,
                      preparePropVal(scope, item.prop),
                      index,
                      item
                    )
                  "
                ></div>
              </el-tooltip>
            </template>
            <template v-else-if="item.customTooltip">
              <el-tooltip
                placement="top"
               :content="item.tooltipContentFunc(scope, preparePropVal(scope, item.prop))">
                <span
                  :class="
                    item.cellClassName
                      ? item.cellClassName(
                          scope,
                          preparePropVal(scope, item.prop),
                          index,
                          item
                        )
                      : ''
                  "
                >
                  {{
                    statusFormatter(
                      scope,
                      preparePropVal(scope, item.prop),
                      index,
                      item
                    )
                  }}
                </span>
              </el-tooltip>
            </template>
            <template v-else>
              <span
                :class="
                  item.cellClassName
                    ? item.cellClassName(
                        scope,
                        preparePropVal(scope, item.prop),
                        index,
                        item
                      )
                    : ''
                "
              >
                {{
                  statusFormatter(
                    scope,
                    preparePropVal(scope, item.prop),
                    index,
                    item
                  )
                }}
              </span>
            </template>
          </template>
        </el-table-column>
      </template>
      <!-- 按钮操作栏-->
      <el-table-column
        label="操作"
        v-if="options.operations && options.operations.length > 0"
        min-width="100"
        :width="options.operationWidth"
        :align="
          options.operationsAlign
            ? options.operationsAlign
            : Utils.Consts.TABLE_OPERATE_ALIGN
        "
        fixed="right"
      >
        <template slot-scope="scope">
          <div class="control">
            <template v-for="(operation, index) in showOperations(scope)">
              <el-button
                v-if="operation.showMethod ? operation.showMethod(scope) : true"
                :key="index"
                @click.stop.prevent="operation.methods(scope)"
                type="text"
                :icon="operation.icon"
                :className="operation.class"
                class="edit"
                :class="operation.class"
                :disabled="
                  operation.disabledMethod
                    ? operation.disabledMethod(scope)
                    : false
                "
                >{{ operation.label }}</el-button
              >
            </template>
            <el-button
              v-if="hideOperations(scope).length > 0"
              type="text"
              class="edit"
            >
              <el-dropdown>
                <span class="el-dropdown-link">
                  <span class="el-icon-more"></span>
                </span>
                <el-dropdown-menu slot="dropdown" class="table-dropdown">
                  <el-dropdown-item
                    v-for="(operation, index) in hideOperations(scope)"
                    @click.native="operation.methods(scope)"
                    :icon="operation.icon"
                    :key="index"
                    >{{ operation.label }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </el-button>
          </div>
        </template>
      </el-table-column>

      <template slot="empty">
        <div>
          <div class="nodataimg" />
          <p class="nodatainfo">暂无内容</p>
        </div>
      </template>
    </el-table>

    <div class="neuPagination" v-if="showPagination">
      <table-column-control
        v-if="options.source && options.columnConfig"
        :source="options.source"
        :optionsColumns="optionsColumns"
        @refresh-columns="refreshColumns"
      />
      <export-excel
        v-if="
          options.exportBtnShow &&
            exportParams &&
            !(exportParams.exportBtn === false)
        "
        :columns="optionsColumns"
        :current-data="data"
        :export-params="exportParams"
      />
      <div class="page_total">
        <span>总共{{ options.total }}条</span>
        <span v-if="!options.customLayout">
          显示{{ options.pageSize * (options.currentPage - 1) + 1 }} -&nbsp;{{
            options.total > options.pageSize * options.currentPage
              ? options.pageSize * options.currentPage
              : options.total
          }}
          条
        </span>
      </div>
      <el-pagination
        ref="pagination"
        v-if="!options.customLayout"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="options.currentPage"
        :page-sizes="options.pageSizes"
        :page-size="options.pageSize"
        :layout="
          options.layout
            ? options.layout
            : options.total <=
              (options.pageSizes && options.pageSizes.length > 0
                ? options.pageSizes[0]
                : 10)
            ? 'pager, sizes, jumper'
            : 'prev, pager, next, sizes, jumper'
        "
        :total="options.total"
      ></el-pagination>
      <el-pagination
        ref="pagination"
        v-if="options.customLayout"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="options.currentPage"
        :page-sizes="options.pageSizes"
        :page-size="options.pageSize"
        :layout="options.customLayout"
        :total="options.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
// import Scrollbar from "@utils/Scrollbar";
import exportExcel from "../Core/exportExcel";
import tableColumnControl from "../Core/tableColumnControl";
import Utils from "../../utils/utils";
import _ from "lodash";

export default {
  name: "com-table",
  components: { exportExcel, tableColumnControl,Utils },
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    selectionFixed: {
      type: Boolean,
      default: false
    },
    isPaginationFixed: {
      type: Boolean,
      default: () => {
        return true;
      }
    },
    // table多选框，全选替换成文字
    selectionLabel: {
      type: String,
      default: ""
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false
    },
    tableRowClassName: {
      type: String,
      default: ""
    },
    tableRowClassNameFunc: {
      type: Function,
      default: () => {}
    },
    tableCellClassNameFunc: {
      type: Function,
      default: () => {}
    },
    objectSpanMethod: {
      type: Function,
      default: () => {}
    },
    cellMouseLeave: {
      type: Function,
      default: () => {}
    },
    cellMouseEnter: {
      type: Function,
      default: () => {}
    },
    cellClick: {
      type: Function,
      default: () => {}
    },
    options: {
      columns: {
        type: Array,
        default: () => {
          return [];
        }
      },
      switchColumns: {
        type: Array,
        default: () => {
          return [];
        }
      },
      operations: {
        type: Object
      },
      operationsShowSize: {
        type: Number,
        default: 2
      },
      resizable: {
        type: Boolean,
        default: true
      },
      selectShow: {
        type: Boolean,
        default: true
      },
      selectable: {
        type: Function,
        default: () => {
          return true;
        }
      },
      indexShow: {
        type: Boolean,
        default: true
      },
      defaultSort: {
        type: Object,
        default: () => {
          return {
            prop: "",
            order: ""
          };
        }
      },
      pageSizes: {
        type: Array,
        default: () => {
          return this.Utils.Consts.PAGE_SIZES;
        }
      },
      pageSize: {
        type: Number,
        default: () => {
          return this.Utils.Consts.PAGE_SIZE;
        }
      },
      layout: {
        type: String,
        default: "prev, pager, next, sizes, jumper"
      },
      maxHeight: {
        type: Number,
        default: null
      },
      customLayout: {
        type: String,
        default: ""
      },
      total: {
        type: Number,
        default: 10
      },
      isShowPagination: {
        type: Boolean,
        default: true
      },
      defaultSortArray: {
        type: Array,
        default: () => {
          return [
            {
              prop: "",
              order: ""
            }
          ];
        }
      },
      autoHeight: {
        type: Boolean,
        default: () => {
          return true;
        }
      },
      isCellDblclick: {
        type: Boolean,
        default: false
      },
      tableEdit: {
        type: Boolean,
        default: false
      }
    },
    export: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    // optionsColumns(newVal, oldVal) {
    //   this.scrollbar.remove();
    // },
    data: {
      immediate: true,
      handler: function() {
        this.setTooltipIsShow();
        this.refreshDoLayout();
      }
    },
    isResize(newVal, oldVal) {
      this.refreshDoLayout();
    }
  },
  computed: {
    Utils() {
      return Utils
    },
    optionsColumns() {
      return this.options.columns;
    },
    showPagination() {
      let result =
        this.options.isShowPagination === undefined
          ? true
          : this.options.isShowPagination;
      return result && this.data.length !== 0;
    },
    tipDisabled() {
      return function(scope, index) {
        const refName =
          this.HTML_TOOLTIP +
          scope.column.property +
          "" +
          scope.$index +
          "" +
          index;
        return !this.canTipRefs.find(v => v === refName);
      };
    },
    showOverflowTooltip() {
      return function(config = {}) {
        if (config.htmlTooltip === undefined) {
          return true;
        } else {
          return !config.htmlTooltip;
        }
      };
    },
    exportParams() {
      return this.export;
    },
    indexFixed() {
      const index = this.options.columns.findIndex(
        value => value.fixed === true
      );
      return index > -1;
    },
    tableData() {
      let tableData = [];
      if (this.filterTableData.length > 0) {
        tableData = this.filterTableData;
      } else {
        tableData = this.data;
      }
      // tableData = this.filterTableData;
      return tableData;
    },
    isResize() {
      // return this.$store.state["MainStore"].isResize;
      return false;
    }
  },
  data() {
    return {
      sort: {
        prop: "",
        order: ""
      },
      editRow: {},
      editColumn: {},
      copyRow: {},
      //已选中的行
      multipleSelection: [],
      HTML_TOOLTIP: "HTML_TOOLTIP",
      canTipRefs: [],
      sortArray: [],
      currentRow: null,
      tableMaxHeight: null,
      showTable: true,
      filterProp: "",
      filterData: "",
      filterTableData: [],
      filterSelect: false
    };
  },
  directives: {
    "el-table-infinite-scroll": {
      bind(el, binding) {
        const selectWrap = el.querySelector(".el-table__body-wrapper");
        selectWrap.addEventListener("scroll", function() {
          let sign = 100;
          const scrollDistance =
            this.scrollHeight - this.scrollTop - this.clientHeight;
          if (scrollDistance <= sign) {
            binding.value();
          }
        });
      }
    }
  },
  methods: {
    setTooltipIsShow() {
      this.$nextTick(() => {
        const canTipRefs = Object.keys(this.$refs).filter(
          item => item.indexOf(this.HTML_TOOLTIP) !== -1
        );
        this.canTipRefs = canTipRefs.filter(refName => {
          const html = this.$refs[refName];
          if (html) {
            let cw = html[0].clientWidth;
            let sw = html[0].scrollWidth;
            return sw > cw;
          }
          return false;
        });
      });
    },
    getRefName(scope, index) {
      return (
        this.HTML_TOOLTIP +
        scope.column.property +
        "" +
        scope.$index +
        "" +
        index
      );
    },
    getLineShowOperations(scope, operations) {
      let self = this;
      let result = [];
      if (operations && operations.length > 0) {
        operations.map(operation => {
          let flag = true;
          if (operation.isShow) {
            flag = operation.isShow(scope);
          }
          if (flag) {
            result.push(operation);
          }
        });
      }
      return _.filter(result, item => {
        return self.Utils.Auth.hasAuth(item.id) || item.id === undefined;
      });
    },
    sortable(data) {
      let status = false;
      if (data === "default") {
        status = true;
      } else if (data) {
        status = "custom";
      } else {
        status = false;
      }
      return status;
    },
    showOperations(scope) {
      let result = [];
      let operations = this.getLineShowOperations(
        scope,
        this.options.operations
      );
      operations.map((o, i) => {
        if (i < this.options.operationsShowSize) {
          result.push(o);
        }
      });
      return result;
    },
    hideOperations(scope) {
      let result = [];
      let operations = this.getLineShowOperations(
        scope,
        this.options.operations
      );
      operations.map((o, i) => {
        let flag = o.isShow ? o.isShow(scope) : true;
        if (!(i < this.options.operationsShowSize) && flag) {
          result.push(o);
        }
      });
      return result;
    },
    rowClassNameFunc({ row, rowIndex }) {
      let result = this.tableRowClassName;
      if (this.tableRowClassNameFunc) {
        result += " " + this.tableRowClassNameFunc(row, rowIndex);
      }
      return result;
    },
    cellClassNameFunc({ row, column, rowIndex, columnIndex }) {
      if (this.tableCellClassNameFunc) {
        return this.tableCellClassNameFunc(row, column, rowIndex, columnIndex);
      }
    },
    classNameFunc(item, index) {
      let result = item.styleClass;
      if (item.styleFunc) {
        result += item.styleFunc(item, index);
      }
      return result;
    },
    load() {
      this.$emit("scrollCallback", {
        multipleSelection: this.multipleSelection
      });
    },
    handleSelectable(row, index) {
      if (this.options.selectable) {
        return this.options.selectable(row, index);
      } else {
        return true;
      }
    },
    tableFilters(item) {
      if (item.selectFilter) {
        return item.selectFilter(item);
      }
    },
    handleFilterChange(filters) {
      if (this.filterSelect) {
        this.$emit("search", {
          ...this.getNowParams(),
          ...filters,
          currentPage: 1
        });
      } else {
        this.$emit("filterChange", filters);
      }
    },
    btnClick(scope, item) {
      if (item.id === undefined) {
        item.btnClick(scope, item);
      }
    },
    btnClickClass(scope, item) {
      let clazz = this.preparePropVal(scope, item.prop) ? item.styleClass : "";
      let clazz2 = item.btnClick ? "titleColor" : "";
      let result = clazz + " " + clazz2;
      if (item.id === undefined) {
        return result;
      } else {
        return result + " noAuthColor";
      }
    },
    iconClick(scope, item) {
      if (item.id === undefined) {
        item.iconClick(scope, item);
      }
    },
    iconClickClass(scope, item) {
      if (item.id === undefined) {
        return item.leftIconClass + " " + item.styleClass;
      } else {
        return item.leftIconClass + " " + item.styleClass + " noAuthColor";
      }
    },
    statusFormatter(scope, cellValue, index, item) {
      if (this.options.columns[index].formatter) {
        return this.options.columns[index].formatter(
          scope,
          cellValue,
          index,
          item
        );
      }
    },
    // eslint-disable-next-line no-unused-vars
    headerDragend(newWidth, oldWidth, column, event) {
      // this.scrollbar.resize();
      // this.$nextTick(() => {
      //   this.scrollbar.resize();
      // }, 100);
    },
    // eslint-disable-next-line no-unused-vars
    renderHeader(h, { column, $index }) {
      let l = column.label.length;
      let f = 18;
      column.minWidth = f * (l + 3); //加上一个文字长度
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis",
            wordBreak: "break-all",
            verticalAlign: "middle"
          }
        },
        [column.label]
      );
    },
    getNowParams() {
      let result = {
        currentPage: !this.$refs.pagination
          ? this.Utils.Consts.CURRENT_PAGE
          : this.$refs.pagination.currentPage,
        pageSize: !this.$refs.pagination
          ? this.Utils.Consts.PAGE_SIZE
          : this.$refs.pagination.pageSize,
        sortArray: this.sortArray
        // sortOrder: this.sort.order,
        // sortProp: this.sort.prop,
        // orderType: this.sort.order
        //   ? this.sort.order.replace("ending", "")
        //   : undefined,
        // orderColumn: this.sort.prop
      };
      return result;
    },
    handleRowClick(row, column) {
      // 多选的时候 点击行也代表checkbox选中
      this.options.activeRowClick && this.$refs.table.toggleRowSelection(row);
      this.options.activeRowClickCallback &&
        this.options.activeRowClickCallback(row, column);
    },
    cellClickFunc(row, column, cell, event) {
      if (this.cellClick) {
        return this.cellClick(row, column, cell, event);
      }
    },
    cellDblclick(row, column, cell, event) {
      this.editRow = row;
      this.editColumn = column;
      this.copyRow = _.cloneDeep(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit("searchMultipleSelection", this.multipleSelection);
    },
    handleSelect(selection, row) {
      this.$emit("handleSelect", selection, row);
    },
    handleSelectAll(selection) {
      this.$emit("handleSelectAll", selection);
    },
    isSortColumn(prop) {
      const index = this.sortArray.findIndex(value => {
        return value.prop === prop;
      });
      let order = "";
      const flag = index > -1;
      if (flag) {
        order = this.sortArray[index].order;
      }
      return { index, flag, order };
    },
    // eslint-disable-next-line no-unused-vars
    handleTheadAddClass({ row, column, rowIndex, columnIndex }) {
      if (column.label) {
        let l = column.label.length;
        let f = 18;
        column.minWidth = f * (l + 3); //加上一个文字长度
      }
      if (this.sortArray.length > 0) {
        if (column.columnKey && column.sortable) {
          // eslint-disable-next-line no-unused-vars
          const { index, flag, order } = this.isSortColumn(column.columnKey);
          column.order = order;
          return order;
        }
      }
    },
    // eslint-disable-next-line no-unused-vars
    handleTableSort({ column, prop, order }) {
      let sortArray = this.sortArray;
      if (!order) {
        if (sortArray.length > 0) {
          const { index, flag } = this.isSortColumn(prop);
          if (flag) {
            sortArray.splice(index, 1);
          }
        }
      } else {
        this.sort = { prop, order };
        if (sortArray.length === 0) {
          sortArray.push(this.sort);
        } else {
          const { index, flag } = this.isSortColumn(this.sort.prop);
          if (flag) {
            let item = sortArray[index];
            item.order = this.sort.order;
          } else {
            sortArray.push(this.sort);
          }
        }
      }
      this.$emit("search", {
        ...this.getNowParams(),
        // sortOrder: order,
        // sortProp: prop,
        // orderType: order ? order.replace("ending", "") : undefined,
        // orderColumn: prop,
        sortArray: sortArray
      });
    },
    indexMethod(index) {
      if (
        this.options.pageSize !== undefined &&
        this.options.currentPage !== undefined
      ) {
        return (
          this.options.pageSize * (this.options.currentPage - 1) + index + 1
        );
      }
      return index + 1;
    },
    indexWidth() {
      const baseWidth = 50;
      const upWidth = 10;
      let nowMax = this.options.pageSize * this.options.currentPage;
      if (nowMax < 1000) {
        return baseWidth;
      } else {
        let times = Math.floor(nowMax / 1000 / 10).toString().length + 1;
        return baseWidth + upWidth * times;
      }
    },
    isTextButton(item,scope,cellValue) {
      if(item.textButton && typeof item.textButton == "function"){
        return(item.textButton(scope,cellValue));
      }else{
        return item.textButton;
      }
    },
    handleSizeChange(val) {
      this.$emit("search", {
        ...this.getNowParams(),
        pageSize: val,
        currentPage: 1
      });
      this.options.pageSize = val;
    },
    handleCurrentChange(val) {
      this.$emit("search", {
        ...this.getNowParams(),
        currentPage: val
      });
      this.options.currentPage = val;
    },
    rowHandleCurrentChange(val) {
      this.currentRow = val;
    },
    refreshColumns(columns) {
      this.$set(this.options, "columns", columns);
      this.$nextTick(() => {
        if (this.$refs.table) {
          this.$refs.table.doLayout();
        }
      });
    },
    async setTableMaxHeight() {
      return new Promise(resolve => {
        setTimeout(() => {
          if (this.options.maxHeight) {
            this.tableMaxHeight = this.options.maxHeight;
          } else if(this.$refs.neuTableWin) {
            // const maxHeight = this.$refs.body.clientHeight - 50;
            const maxHeight = document.documentElement.clientHeight - 50;
            console.log(maxHeight,"dddddddddddddddddddddddddd");
            this.tableMaxHeight = maxHeight <= 220 ? 200 : maxHeight;
          }
          resolve(true);
        }, 100);
      });
    },
    showColumn(item) {
      const type = typeof item.show;
      if (type === "function") {
        return item.show(item, this.data);
      } else {
        return !(item.show === false);
      }
    },
    showPercentage(item, scope) {
      const type = typeof item.percentage;
      if (item.percentage && type === "function") {
        return item.percentage(scope);
      } else {
        return this.preparePropVal(scope, item.prop);
      }
    },
    preparePropVal(scope, prop) {
      let value;
      if (prop.lastIndexOf(".") > 0) {
        value = scope.row;
        prop.split(".").forEach(item => {
          value = value[item];
        });
      } else {
        value = scope.row[prop];
      }
      return value;
    },
    async refreshDoLayout() {
      await this.setTableMaxHeight();
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },
    inputFilter: _.debounce(function(prop) {
      const data = this.data.filter(
        rowData =>
          !this.filterData ||
          rowData[prop].toLowerCase().includes(this.filterData.toLowerCase())
      );
      this.filterTableData = data;
    }, 500),
    filterHandler(value, row, column, item) {
      const property = column["property"];
      if (!item || (item && !item["showFilterButton"])) {
        this.filterSelect = false;
        return row[property] === value;
      } else {
        this.filterSelect = true;
        return true;
      }
    },
    sureSearch(val) {
      let newPrams = {};
      newPrams[val] = this.filterData;
      this.$emit("search", {
        ...this.getNowParams(),
        ...newPrams,
        currentPage: 1
      });
    },
    clearFilter() {
      this.$refs.table.clearFilter();
    }
  },
  mounted() {
    this.pageSize = this.options.pageSize;
    // let tableDom = this.$refs.table.$el.querySelector(
    //   ".el-table__body-wrapper"
    // );
    // this.scrollbar = new Scrollbar(tableDom, {
    //   handlers: ["click-rail", "drag-thumb", "keyboard", "wheel", "touch"],
    //   swipeEasing: true,
    //   minScrollbarLength: 20,
    //   suppressScrollY: true
    // });
    this.sort = this.options.defaultSort
      ? this.options.defaultSort
      : {
          prop: "",
          order: ""
        };
    //多列排序
    this.sortArray = this.options.defaultSortArray
      ? [...this.options.defaultSortArray]
      : [];
    if (this.selectionLabel) {
      // 不展示table多选项中的全选
      this.$nextTick(() => {
        let node = this.$refs.table.$el.querySelector(
          ".el-table__fixed-header-wrapper .el-table__header .el-table-column--selection .cell .el-checkbox"
        );
        node.setAttribute("data-attr", this.selectionLabel);
      });
    }
    this.setTooltipIsShow();
    this.$nextTick(() => {
      this.refreshDoLayout();
    });
  },
  updated() {
    // this.scrollbar.show();
    // setTimeout(() => {
    //   this.scrollbar.resize();
    // }, 200);
    this.multipleSelection = this.options.multipleSelection || [];
    this.multipleSelection.forEach(row => {
      this.$refs.table.toggleRowSelection(row);
    });
  }
};
</script>
<style scoped lang="scss">
.htmlTooltipCss {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control {
  display: inline-block;
  text-align: center;
}

.nodataimg {
  display: inline-block;
  width: 144px;
  height: 144px;
  background-image: url("../../assets/img/nodata.png");
}

.nodatainfo {
  line-height: 24px;
  font-size: 14px;
  color: #606266;
}

/*移除Table表格的全选功能*/
::v-deep .com-checkbox-all-none {
  .el-table__header .el-table-column--selection .cell .el-checkbox {
    &::after {
      content: attr(data-attr);
    }
    color: #303133;
  }
  .el-table__header
    .el-table-column--selection
    .cell
    .el-checkbox
    .el-checkbox__input {
    display: none;
  }
}

.noAuthColor {
  color: #606266 !important;
}
.noAuthColor:hover {
  color: #606266 !important;
}

.neuPagination {
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  // margin-top: 10px;

  .page_total {
    font-size: 13px;
    color: #606266;
    padding: 2px 5px;
    line-height: 20px;
  }
}

.pagination.fixed {
  position: relative;
  bottom: 0;
  background: white;
  width: calc(100% - 30px);
  z-index: 1200;
  height: 40px;
  padding: 10px 0;
  margin-left: -10px;
}

.edit {
  padding: 0;
  text-align: left;
  float: left;
  height: 17px !important;
}
.edit.polish {
  color: transparent !important;
  pointer-events: none !important;
}

.tableTextButton {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 0px;
}

.titleColor {
  color: #1b65b9;
  cursor: pointer;
}

.titleColor:hover {
  color: #3ca0f6;
}

::v-deep .el-table__empty-block {
  .el-table__empty-text {
    line-height: 0;
  }
}

::v-deep span.audit__handling {
  width: 56px;
  height: 24px;
  cursor: pointer;
  line-height: 24px;
  text-align: center;
  display: inline-block;
  font-size: 12px;
  color: #ffffff;
  background: rgba(27, 101, 185, 1);
  border-radius: 2px;
  border: 1px solid rgba(27, 101, 185, 1);
}

::v-deep span.audit__dealing {
  width: 56px;
  height: 24px;
  cursor: pointer;
  line-height: 24px;
  text-align: center;
  display: inline-block;
  font-size: 12px;
  color: #1b65b9;
  background: rgba(27, 101, 185, 0.15);
  border-radius: 2px;
  border: 1px solid rgba(27, 101, 185, 1);
}

::v-deep .el-table th,
::v-deep .el-table td {
  padding: 10px 0;
  box-sizing: border-box;
}

.com-table-win .el-table ::v-deep td.itemPadding {
  padding: 0 !important;
}
// .com-table-win.fixedPage {
//   padding-bottom: 40px !important;
// }

::v-deep .el-progress__text {
  font-size: 12px !important;
}

::v-deep .el-progress-bar__outer {
  height: 4px !important;
}

.com-table-win .el-table--fit ::v-deep .el-table__fixed {
  height: 100% !important;
}

::v-deep .el-switch-small {
  width: 28px;
  height: 16px;
}

::v-deep .el-switch-small .el-switch__core {
  height: 16px;
}

::v-deep .el-switch-small .el-switch__core:after {
  width: 12px;
  height: 12px;
  position: absolute;
  top: 1px;
}

::v-deep .el-switch-small.is-checked .el-switch__core::after {
  left: 114%;
}

::v-deep .com-table-win .el-table__fixed {
  height: 100% !important;
}

.com-table-win {
  background: #ffffff;
  ::v-deep .el-icon-arrow-down:before {
    content: "\e663";
    color: #1b65b9;
    font-family: "iconfont" !important;
    font-size: 12px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

::v-deep .cell .el-table__column-filter-trigger {
  line-height: 0;
}

.el-table {
  ::v-deep .ps--active-x > .ps__rail-x,
  .ps--active-y > .ps__rail-y {
    z-index: 4;
    opacity: 1 !important;
  }

  ::v-deep .el-table__body-wrapper.ps--active-x:hover .ps__rail-x,
  .el-table__body-wrapper.ps--active-x:hover .ps__rail-y {
    opacity: 0.6;
  }
}

.el-table__fixed-right {
  right: 0 !important;
  height: calc(100%) !important;
  z-index: 3;
}

::v-deep .el-table--scrollable-y {
  .el-table__fixed-right {
    right: 10px !important;
    height: calc(100% - 13px) !important;
    z-index: 3;
  }
}
::v-deep .el-table .el-input--small .el-input__icon {
  line-height: 20px !important;
}

::v-deep .el-table__column-resize-proxy {
  border-left: 3px solid #1b65b9;
}

::v-deep .el-table--border {
  border: 1px solid transparent;
}

::v-deep .el-table--border th:first-child .cell,
::v-deep .el-table--border td:first-child .cell {
  padding: 0 8px !important;
}

::v-deep .el-table--group::after,
::v-deep .el-table--border::after {
  width: 0;
}

::v-deep .el-table {
  font-size: 14px;
  color: #606266;
}

.el-table th > ::v-deep .cell {
  color: #303133;
}

.el-table ::v-deep th {
  background-color: #f0f2f5;
}

.el-table ::v-deep td {
  height: 40px;
  line-height: 40px;
}

.el-table ::v-deep .cell {
  line-height: 20px;
  display: block;
}

::v-deep .el-table .caret-wrapper {
  height: auto;
}

::v-deep .el-table .sort-caret.descending {
  bottom: auto;
}

::v-deep .el-table .sort-caret.ascending {
  top: -12px;
}

::v-deep .el-table-top.el-input,
::v-deep .el-input__inner {
  height: 32px;
  border-radius: 2px;
}

::v-deep .el-table-top.el-button[type="primary"] {
  color: #ffffff;
  background: #1b65b9;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(27, 101, 185, 0.15);
}

.el-table__row {
  ::v-deep .is-left {
    text-align: left;
  }

  ::v-deep .is-center {
    text-align: center;
  }

  ::v-deep .is-right {
    text-align: right;
  }
}

::v-deep .el-pager .more:before,
::v-deep .el-pager li.btn-quicknext,
::v-deep .el-pager li.btn-quickprev,
::v-deep .el-pagination button,
::v-deep .el-pager li {
  min-width: 20px;
  height: 20px;
  line-height: 20px;
}

::v-deep .el-pager li.active {
  border-radius: 2px;
  background: #1b65b9;
  color: white;
}

::v-deep .el-pagination {
  font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif,
    "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB";
  font-weight: normal;
}

.el-pagination__sizes ::v-deep .el-input__suffix ::v-deep .el-icon-arrow-up {
  margin-top: 5px;
}

.el-pagination__sizes
  ::v-deep
  .el-input__suffix
  ::v-deep
  .el-icon-arrow-up.is-reverse {
  margin-top: -5px;
}

.el-pager ::v-deep li {
  font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif,
    "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB";
}

::v-deep .el-pagination__editor.el-input {
  width: 40px;
  height: 20px;
}

::v-deep .el-pagination__editor.is-in-pagination .el-input__inner {
  height: 20px;
}

::v-deep .el-input--mini.el-input--suffix .el-input__inner {
  height: 20px;
  line-height: 20px;
}

.el-pagination .el-select .el-input {
  width: 85px;
  height: 20px;
}

::v-deep .el-pagination span:not([class*="suffix"]),
.el-pagination button {
  height: 20px;
  line-height: 20px;
}

::v-deep .el-input__suffix-inner .el-input__icon {
  line-height: 20px;
}

.el-pagination .btn-prev .el-icon,
.el-pagination .btn-next .el-icon {
  border: 1px solid #c0c4cc;
  border-radius: 2px;
  padding: 3px;
}

::v-deep .el-pagination__jump {
  margin-left: 10px;
}

::v-deep {
  .el-table th:first-child,
  .el-table tr td:first-child {
    border-left: 1px solid #cecece4f;
  }
}

::v-deep.el-table th.is-leaf,
::v-deep.el-table td {
  border-bottom: 1px solid #cecece30;
}

::v-deep.el-pagination ::v-deep.btn-prev ::v-deep.el-icon,
::v-deep.el-pagination ::v-deep.btn-next ::v-deep.el-icon {
  border: 1px solid #c0c4cc;
  border-radius: 2px;
  padding: 3px;
}

::v-deep .el-table__header-wrapper {
  min-height: 41px;
  .el-icon-arrow-down:before {
    content: "" !important;
    color: #909399;
    font-family: element-icons !important;
    font-size: 12px !important;
    font-weight: bold !important;
  }
}

::v-deep .el-table__body-wrapper {
  z-index: 2;
}

/**************滚动条样式start *****************/
::v-deep {
  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 12px;
  }
  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background-color: #bbb;
  }
  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #f6f6f6;
    border-radius: 10px;
  }
}

/**********************滚动条样式end ******************/
::v-deep .is-disabled {
  &.com-delete-plain {
    color: #c0c4cc !important;
  }
}
.cell-num-up {
  font-weight: bold;
  color: #df6270;
}
.cell-num-down {
  font-weight: bold;
  color: #67c23a;
}
.cell-num {
  font-weight: bold;
  color: #333;
}
</style>
